<template>
    <div class="category">
        <img 
        :style="{
            top:'-4px',
            left:'27%',
        }"
        src="../assets/model-1.png" alt="" class="bg-pen">
        <img
        :style="{
            bottom:'0px',
            left:'27%',
        }"
         src="../assets/model-2.png" alt="" class="bg-pen">
        <img
        :style="{
            left:'0px',
            top:'0px'
        }"
         src="../assets/model-4.png" alt="" class="bg-pen">
        <img 
        :style="{
            right:'0px',
            top:'0px'
        }"
        src="../assets/model-3.png" alt="" class="bg-pen">
        <img 
        :style="{
            left:'0px',
            bottom:'0px'
        }"
        src="../assets/model-5.png" alt="" class="bg-pen">
        <img 
        :style="{
            right:'0px',
            bottom:'0px'
        }"
        src="../assets/model-6.png" alt="" class="bg-pen">
        <div 
        :style="{
            left:'2px',
            top:'25%',
        }"
         class="bg-pen line"></div>
         <div 
        :style="{
            right:'2px',
            top:'25%',
        }"
         class="bg-pen line"></div>
        <div class="tilte">
            <div class="name">{{data.title}}</div>
            <div class="grade">年级</div>
            <div class="class">班级</div>
        </div>
        <my-chart :options="data.options" height="276px" width="369px"></my-chart>
    </div>
</template>

<script>
import MyChart from "./MyChart.vue";
export default {
    components: { MyChart },
    name: "CategoryChart",
    props: ['data']
}
</script>

<style scoped>
.category {
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    width: 570px;
    padding: 20px;
    position: relative;
    margin-bottom: 20px;
}

.tilte {
    font-size: 18px;
    display: flex;
    width: max-content;
    margin-bottom: 12px;
}
.tilte div {
    height: 36px;
    border: 1px solid rgba(9, 121, 120, 100);
    line-height: 36px;
    box-sizing: border-box;
    border-left: 0px;
}
.tilte div.name {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    padding-right: 10px;
    padding-left: 30px;
}
.bg-pen{
    position: absolute;
}
.line {
    width: 0px;
    height: 50%;
    border-left: 1px solid rgba(174, 174, 174, 1);
    opacity: 0.6;
}
.grade,.class {
    position: relative;
    margin-left: 36px;
    padding-right: 18px;
    
}
.class::before ,.grade::before{
    position: absolute;
    content: '';
    visibility: visible;
    display: block;
    top:-1px;
    left:-36px;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 0px solid transparent;
    border-right: 36px solid rgba(9, 121, 120, 100);
    border-top: 36px solid transparent;
    
}
.class::after,.grade::after{
    position: absolute;
    content: '';
    visibility: visible;
    top:0px;
    left:-34px;
    display: block;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 0px solid transparent;
    border-right: 34px solid rgba(3, 12, 39, 100);
    border-top: 34px solid transparent;
}
</style>